<template>
  <div class="home">
  <van-swipe
  class="my-swipe"
  indicator-color="white"
  :style="{paddingTop: '14px', height: '230px'}">
    <van-swipe-item>
      <van-grid gutter="10px" :border="flag">
        <van-grid-item
        v-for="item in first"
        :key="item.id"
        :icon="imgUrl + item.image_url"
        :text="item.title" />
      </van-grid>
    </van-swipe-item>
    <van-swipe-item>
      <van-grid gutter="10px" :border="flag">
        <van-grid-item
        v-for="item in last"
        :key="item.id"
        :icon="imgUrl + item.image_url"
        :text="item.title"
         />
      </van-grid>
    </van-swipe-item>
  </van-swipe>
  <van-divider
  :hairline="false"
  :style="{margin:'0px'}"
  content-position="center">
    商家列表
  </van-divider>
  <div
  v-for="shops in shopList"
  :key="shops.id">
    <van-card @click="$router.push('/detial')">
    <template #title>
      <p>
        <span
        :style="{fontSize: '16px', color: '#333', fontWeight: '700'}"
        >{{shops.name}}</span>
        <span
        v-for="supports in shops.supports"
        :key="supports.id"
        :style="{float: 'right', color: '#999', marginLeft: '4px', fontSize: '10px'}"
        >
          {{supports.icon_name}}
        </span>
      </p>
    </template>
    <template #desc>
      <p :style="{marginTop: '10px'}" >
        <van-rate
        v-model="shops.rating"
        size='10px'
        color="orange"
        allow-half void-icon="star"
        void-color="#eee"
        :readonly="true"
        />
        <span :style="{marginLeft: '4px', marginRight: '4px',color: 'orange'}">
          {{shops.rating}}
        </span>
        <span>
          月售{{shops.recent_order_num}}单
        </span>
        <span
        :style="{float: 'right', color: '#02a774'}">
          {{shops.delivery_mode.text}}
        </span>
      </p>
    </template>
    <template #price>
      <p :style="{marginBottom: '16px'}">
        ￥{{shops.float_minimum_order_amount}}起送/{{shops.piecewise_agent_fee.tips}}
      </p>
    </template>
    <template #thumb>
      <img
      src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=281954871,2387533879&fm=26&gp=0.jpg"
      alt=""
      :style="{width:'70px', height: '70px'}">
    </template>
    </van-card>
  </div>

  </div>
</template>

<script>
import { getSwipeData, getShopList } from '@/api/home'
export default {
  name: 'Home',
  data () {
    return {
      flag: false,
      swipeList: [],
      first: [],
      last: [],
      imgUrl: 'https://fuss10.elemecdn.com/',
      shopList: []
    }
  },
  async created () {
    const res = await getSwipeData()
    this.swipeList = res.data
    this.swipeList.forEach((item, index) => {
      if (index < 8) {
        this.first.push(item)
      } else {
        this.last.push(item)
      }
    })
    const result = await getShopList(40.10038, 116.36867)
    // console.log(result.data)
    this.shopList = result.data
  }
}

</script>

<style lang="less" scoped>
/deep/.van-swipe__indicator{
  opacity: .7;
  background-color: #eee;
}
/deep/.van-icon__image{
  width: 50px;
  height: 50px;
}
/deep/.van-card{
  background-color: #fff;
}
</style>
